<template>
  <div class='projectDetails'>
    <div class='imgBox'>
      <el-carousel class='carouselImg' v-if="carousels.length>0">
        <el-carousel-item
          v-for="item in carousels"
          :autoplay='true' :key="item">
          <!-- <h3>{{ item }}</h3> -->
          <img :src="item" alt="">
        </el-carousel-item>
      </el-carousel>
      <div class='textBox' :style="{background: 'url('+img+') center center no-repeat',backgroundSize:'cover'}">
        <h3>{{title}}</h3>
        <p>
          <span>{{type}}</span>
          <span>{{status}}</span>
        </p>
      </div>
    </div>
    <div class="head-bottom" v-if="movieStatus !=='preheating'">
      <div class='textNumber'>
        <div>
          <h4>已购金额(元)</h4>
          <p>{{salesOfMoney}}</p>
        </div>
        <div>
          <span>达成率</span>
          <span>{{scale}}</span>
        </div>
        <div>
          <span>剩余份数</span>
          <span v-if="movieStatus ==='ing'">{{surplusNum}}份</span>
          <span
            v-if="movieStatus ==='pause' ||  movieStatus ==='bonus'|| movieStatus ==='finish'">{{movieStatusText}}</span>
        </div>
      </div>
      <div class='progress'>
        <el-progress :percentage="percent" :show-text='false' color="#FF1268" stroke-width="10"></el-progress>
        <!--<p>目标筹集金额{{totalOfMoney}}万</p>-->
      </div>
    </div>


    <div class="condition orange" v-if="movieStatus==='preheating'">
        <div class="left_icon">
          <div class="line"></div>
          <i class='iconfont'>&#xe62d;</i>
        </div>
        <div class="textWrap">
          <span>项目预热中 </span><span>请等待开放</span>
        </div>
        <div class="right_icon">
          <i class='iconfont'>&#xe62d;</i>
          <div class="line"></div>
        </div>
    </div>
    <!-- 认购流程 -->
    <div class='subscriptionProcess'>
      <h3>
        [<span>认购流程</span>]
      </h3>

      <div class='subScription'>
        <div class="item">
          <div>
            <i class='iconfont icon-dianying-copy'></i>
            <i class='right'>→</i>
          </div>
          <p>客户了解认购项目</p>
        </div>
        <div class="item">
          <div>
            <i class='iconfont icon-ic_paid'></i>
            <i class='right'>→</i>
          </div>
          <p>客户确认认购份数给视纪影视预定份额，并支付款项</p>
        </div>
        <div class="item">
          <div>
            <i class='iconfont icon-hetongdingdan'></i>
            <i class='right'>→</i>
          </div>
          <p>出品方签字合同生效后，出品方邮寄合同给购买客户</p>
        </div>
        <div class="item">
          <div>
            <i class='iconfont icon-woyaorongzi'></i>
          </div>
          <p>{{incomeDetail}}</p>
        </div>

      </div>

      <p class='indication'><span @click='showDialog()'>风险提示</span><i @click='showDialog()' class='iconfont icon-tishi'></i></p>

    </div>

    <div class='subscriptionProcess notBorder'>
      <h3>
        [<span>详细介绍</span>]
      </h3>
      <div class='content' v-html='content'>
      </div>
    </div>
    <div class='readText'>
      <p>点击认购代表阅读并同意<span @click='agreement()'>《视纪影视平台服务协议》</span></p>
      <p>投资有风险，购买需谨慎</p>
    </div>
    <!--<div class='bottomBar' v-if="movieStatus==='ing'">-->
            <!--<div class="left">-->
              <!--<div @click="share_Poup = true">-->
                <!--<p>-->
                  <!--<i class='iconfont icon-fenxiang'></i>-->
                  <!--<span>分享</span>-->
                <!--</p>-->

              <!--</div>-->
              <!--<div>-->
                <!--<p>-->
                  <!--<i class='iconfont icon-jiagebaohu'></i>-->
                  <!--<span>{{price}}/份</span>-->
                <!--</p>-->
              <!--</div>-->
            <!--</div>-->
          <!--<div class="right" @click="buy()">-->
            <!--立即认购-->
          <!--</div>-->
    <!--</div>-->

    <div class="footerFixed">
      <div class="wrap" v-if="movieStatus==='ing'">
        <div class="left">
          <!--<div @click="share_Poup=true"><i class='iconfont'>&#xe667;</i>分享</div>-->
          <div v-if="movieStatus==='ing'"><i class='iconfont'>&#xe603;</i>{{price}}/份</div>
        </div>
        <div v-if="movieStatus ==='ing'" class="buyBtn" @click="buy()">立即认购</div>
      </div>

      <div class="preheating" v-if="movieStatus !=='ing'">
        <div class="left">
          <div @click="share_Poup=true"><i class='iconfont'>&#xe667;</i>分享</div>
        </div>
        <!-- 预热中 -->
        <div v-if="movieStatus==='preheating'" class="preheatingText" >项目预热中  请等待开放</div>
        <!-- 停售 -->
        <div v-if="movieStatus==='pause'" class="preheatingText red" >暂停销售  等待权益发放</div>
        <!-- 售卖完成 -->
        <div v-if="movieStatus==='finish'" class="preheatingText gray" >项目结束   权益已发放</div>
        <!-- 待收益 -->
        <div v-if="movieStatus==='bonus'" class="preheatingText red" >筹款成功  等待权益发放</div>

      </div>


    </div>


    <!--<div v-if='dialogVisible' class='indicationDialog'>-->
      <!--<div class='indication'>-->
        <!--<div class='dialogBox'>-->
          <!--<h3>亏本风险提示</h3>-->
          <!--<p>{{riskWarning}}</p>-->
          <!--<a @click="dialogVisible = false" href="javascript:;">知道了</a>-->
        <!--</div>-->
      <!--</div>-->

    <!--</div>-->

    <!-- 分享 -->

    <div v-if="share_Poup" class='sharePoup'>
      <div class="sharePoupWrap">
        <div class="top">
          <div class="item wachat" @click="share">
            <div class="imgDiv">
              <img src="../../assets/image/wachat.png">
            </div>

            <span>微信</span>
          </div>
          <div class="item friends" @click="share">
            <div class="imgDiv">
              <img src="../../assets/image/friends.png">
            </div>
            <span>朋友圈</span>
          </div>
          <div class="item weibo" @click="share">
            <div class="imgDiv">
              <img src="../../assets/image/weibo.png">
            </div>
            <span>新浪微博</span>
          </div>
        </div>
        <div class="bottom" @click="share_Poup = false">
          取消
        </div>
      </div>
    </div>

    <!-- 亏本风险提示 -->
    <div v-if='dialogVisible' class='indicationDialog'>
      <div class='indication'>
        <div class='dialogBox'>
          <h3>风险提示</h3>
          <p>{{riskWarning}}</p>
          <a @click="dialogVisible = false" href="javascript:;">取消</a>
        </div>
      </div>
    </div>
    <!-- 认证提醒 -->
    <div v-if='certificationTip' class='certificationTip'>
      <div class='certification'>
        <div class='dialogBox'>
          <h3>温馨提示</h3>
          <p>根据国家相关监管政策要求，购买理财产品需实名认证。请实名认证后再认购产品。</p>
          <div class="btnGroup">
            <div class="btn cancel" @click="certificationTip = false">再看看</div>
            <div class="btn red" @click="certification">去认证</div>
          </div>
        </div>
      </div>

    </div>

  </div>

</template>


<script>
  import {ajax} from '@/api';
  import {parseTime,share,getDomain} from '@/utils';
  import numberFormat from '@/api/numberFormat';

  export default {
    name: 'projectDetails',
    data() {
      return {
        img:require('../../assets/image/projectBj.png'),
        params: {
          movieId: '',
        },
        title: '',
        incomeDetail: '',
        type: '',
        status: '',
        movieStatus: '',
        movieStatusText: '',
        salesOfMoney: '',
        percent: 0,
        scale: '',
        totalOfMoney: '',
        userLimit: '',
        carousels: [],
        price: '',
        surplusNum: '',
        riskWarning: '',
        content: '',
        deposit: '',
        dialogVisible: false,
        share_Poup: false,
        certificationTip: false,
        login: false,
        authTime: 0,
        authStatus: ''
      }
    },
    methods: {
      showDialog() {
        this.dialogVisible = true;
        console.log(this.dialogVisible);
      },
      agreement() {
        uni.navigateTo({
          url: '../my/tool/userAgreement'
        });
      },
      handleClose(done) {
        done()
      },
      share() {
        console.log(111);
        share('weixin', {
          type: 'web',
          title: this.title,
          content: this.title,
          href: getDomain()+'app/#/shareShow/projectDetails/'+this.params.movieId+'/false/0/init',
          thumbs: ['http://www.jcbang.net/logo.png'],
          extra: {scene: "WXSceneTimeline"}
        });
        this.share_Poup = false
      },
      getDetails() {
        this.params.movieId = this.$route.params.id;
        this.login = this.$route.params.login;
        this.authTime = this.$route.params.authTime;
        this.authStatus = this.$route.params.authStatus;
        ajax('movieDetail', this.params).then((json) => {
          if (json.data.status) {
            // this.img = json.data.data.info.coverImage;
            this.title = json.data.data.info.title;

            this.incomeDetail = json.data.data.info.incomeDetail;
            this.type = json.data.data.type.text;
            this.status = json.data.data.releaseStatus.text;
            this.movieStatus = json.data.data.status.value;
            this.movieStatusText = json.data.data.status.text;
            this.salesOfMoney = json.data.salesOfMoney / 100;

            this.percent = this.getScale(json.data.salesOfMoney, json.data.data.totalOfMoney);
            this.scale = this.getScale(json.data.salesOfMoney, json.data.data.totalOfMoney) === 0 ? 0 : this.getScale(json.data.salesOfMoney, json.data.data.totalOfMoney) + '%';

            this.totalOfMoney = json.data.data.totalOfMoney / 1000000;
            if (json.data.data.info.userLimit) {
              this.userLimit = json.data.data.info.userLimit;
            }
            this.carousels = json.data.data.info.carousels;
            // console.log(this.carousels);
            this.price = json.data.data.info.priceOfUnit / 100;
            this.surplusNum =
              (json.data.data.totalOfMoney - json.data.salesOfMoney) / json.data.data.info.priceOfUnit;
            if (json.data.data.info.riskWarning) {
              this.riskWarning = json.data.data.info.riskWarning;
            }

            this.content = json.data.data.info.content;
            this.deposit = numberFormat.showDecimal(json.data.data.info.deposit);
          }
        });
      },
      //百分比
      getScale(num, total) {
        num = parseFloat(num);
        total = parseFloat(total);
        // if (isNaN(num) || isNaN(total)) {
        //   return "-";
        // }
        return total <= 0 ? 0 : Math.round((num / total) * 10000) / 100.0;
      },
      certification() {
        this.certificationTip = false;
        if (this.authStatus == 'checking') {
          uni.navigateTo({
            url: '../my/toCertification3'
          });
        } else {
          uni.navigateTo({
            url: '../my/toCertification'
          });
        }
      },
      buy() {
        console.log(this.login);
        console.log(this.authTime);
        if (this.login == 'true') {
          if (this.authTime == 0) {
            this.certificationTip = true;
          } else {
            uni.navigateTo({
              url:
              './offerToBuy?price=' +
              this.price +
              '&userLimit=' +
              this.userLimit +
              '&deposit=' +
              this.deposit +
              '&movieId=' +
              this.params.movieId +
              '&surplusNum=' +
              this.surplusNum
            });
          }
        } else {
          console.log(1);
          uni.navigateTo({
            url: '../login/index'
          });
        }
      }
    },
    mounted() {
      document.title = '视纪影视';
      this.getDetails()
    }
  }
</script>


<style lang="less">
  .projectDetails {
    background: #f2f2f2;
    position: relative;

    .imgBox {
      position: relative;
      width: 100%;
      height: 230px;
      .carouselImg {

        height: 230px;
        img {
          width: 100%;
          height: 230px;
        }
      }
      .textBox {
        width: 100%;
        height: 82px;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 20;
        .el-carousel__indicator {
          display: none;
        }
        h3 {
          padding-left: 15px;
          box-sizing: border-box;
          margin: 0;
          margin-top: 15px;
          color: #f6f6f6;
          font-weight: 400;
          font-size: 18px;
        }
        p {
          padding-left: 15px;
          box-sizing: border-box;
          margin: 10px 0;
          span {
            color: #fff;
            font-size: 11px;
            display: inline-block;
            padding: .3rem .4rem;
            border-radius: 4px;
            margin-right: .2rem;
            background: rgba(255, 255, 255, .2);
          }

        }
      }
    }
.head-bottom{
  .textNumber {
    display: flex;
    padding: 20px 7px 20px 20px;
    background: #fff;
    h4, p {
      margin: 0;
    }
    div:first-child {
      width: 60%;
      h4 {
        font-weight: 400;
        color: #ff0000;
        font-size: 14px;
      }
      p {
        font-size: 20px;
        color: #fc594e;
        margin-top: .3rem;
      }
    }
    div:nth-child(2), div:last-child {
      width: 20%;
      span {
        display: inline-block;
        width: 100%;
      }
      span:first-child {
        color: #999;
        font-size: 13px;
        text-align: center;
      }
      span:last-child {
        color: #333;
        font-size: 13px;
        text-align: center;
        margin-top: .3rem;
      }
    }

  }
  .progress {
    padding: 5px 20px 35px 20px;
    background: #fff;
    height: 10px;
    p {
      margin: 15px 0 0 0;
      text-align: right;
      color: #999;
      font-size: 13px;
    }
  }
}
    .condition {
      background: white;
      height: 80px;
      justify-content: center;
      align-items: center;
      display: flex;
      i {
        font-size: 12px;
        color: #ff1268;
      }
      .line {
        height: 1px;
        background: #ff1268;
        width: 45px;
      }
      .textWrap {
        margin: 0 7px 0 14px;
        span {
          font-size: 15px;
          color: #ff1268;
        }
        span:first-child {
          margin-right: 18px;
        }
      }

      .left_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 51px;
        height: 28px;
        i {
          position: absolute;
          right: -6px;
          top: 8px;
        }
        .line {
          width: 45px;
        }
      }
      .right_icon {
        width: 51px;
        height: 28px;
        display: flex;
        align-items: center;
        position: relative;
        .line {
          position: absolute;
          left: 10px;
          top: 14px;
        }
      }
    }
    .orange {
      .line {
        background-color: #ff9800;
      }
      i,
      .textWrap span {
        color: #ff9800;
      }
    }
    .gray {
      .line {
        background-color: #bbbaba;
      }
      i,
      .textWrap span {
        color: #bbbaba;
      }
    }

    .subscriptionProcess {
      margin-top: 10px;
      padding: 20px;
      background: #fff;
      h3 {
        margin: 0;
        color: #aaa;
        font-size: 16px;
        text-align: center;
        span {
          color: #000;
          margin: 0 1rem;
        }
      }
      .content{
        font-size: 14px;
        color: #333333;
        line-height: 20px;
        img{
          max-width: 100%;
        }
      }
      .indication {
        text-align: center;
        margin: 20px 0 0 0;
        display: flex;
        align-items: center;
        justify-content: center;
        p{
          margin: 0;
        }
        span {
          color: #bbb;
          font-size: 13px;
          margin-right: .3rem;
          margin-top: 1.5px;
        }
        .iconfont {
          color: #aaa;
        }
      }
      .subScription {
        display: flex;
        margin-top: 1.5rem;
        .item {
          width: 25%;
          text-align: center;
          div {
            width: 33px;
            height: 33px;
            line-height: 33px;
            border-radius: 50px;
            text-align: center;
            margin: 0 auto;
            position: relative;
            .iconfont {
              font-size: 1.25rem;
              color: #fff;
            }
            .right {
              position: absolute;
              right: -2.5rem;
              font-size: 1.5rem;
              color: #999;
            }
          }
          p {
            margin: 10px auto;
            font-size: 12px;
            width: 4rem;
            line-height: 16px;
          }
        }
        .item:first-child {
          p {
            color: #3c80ae;
          }
          div:first-child {
            background: #3c80ae;
          }
        }

        .item:nth-child(2) {
          p {
            color: #fc5945;
            width: 88%;
          }
          div:first-child {
            background: #fc5945;
          }
        }

        .item:nth-child(3) {
          p {
            color: #259b24;
            width: 84%;
          }

          div:first-child {
            background: #259b24;
          }
        }

        .item:last-child {
          p {
            color: #ff1268;
          }
          div:first-child {
            background: #ff1268;
          }
        }

      }
    }

    .notBorder {
      border: none;
      .content {

        .wscnph {
          width: 100%;
        }
      }
    }

    .readText {
      text-align: center;
      margin: 1rem 0 0 0;
      padding-bottom: 7rem;
      p {
        margin: 0;
        font-size: 12px;
        color: #999;
        span {
          color: #ff1268;
        }
      }
      p:last-child {
        margin: .3rem 0 0 0;
      }
    }
    .bottomBar {
      display: flex;
      width: 100%;
      position: fixed;
      bottom: 0;
      box-shadow: 1px -3px 2px 0 #f4f4f4;
      height: 55px;
      .left {
        width: 56%;
        display: flex;
        padding: 0.2rem 1rem .2rem 0;
        background: #fff;
        align-items: center;
        div {
          text-align: center;
          width: 50%;
          display: flex;
          text-align: center;
          p {
            width: 100%;
          }
          .iconfont {
            font-size: 1.3rem;
          }
          span {
            font-size: 16px;
            color: #333;
          }
        }
        div:last-child {
          // width: 8rem;
        }
      }
      .right {
        width: 44%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 0;
        background: linear-gradient(to right, #ff48ac, #ff1268);
        color: #fff;
      }
    }
    .footerFixed {
      background: white;
      width: 100%;
      position: fixed;
      bottom: 0;
      height: 55px;
      box-shadow: 0 0 0.277778rem #e8e6e6;
      .wrap {
        width: 100%;
        height: 55px;
        display: flex;
        flex-direction: row;
        .left {
          display: flex;
          /*justify-content: space-around;*/
          width: 60%;
          background: white;
          padding: 0 20px;
          box-sizing: border-box;
          div {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            font-size: 16px;
            width: 100%;
            color: #333333;
            .iconfont {
              margin-right: 8px;
              font-size: 20px;
            }
          }
        }
        .buyBtn {
          display: flex;
          font-size: 20px;
          width: 40%;
          background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
          background: -o-linear-gradient(to right, #ff48ac, #ff1268);
          background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
          background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
          background: linear-gradient(to right, #ff48ac, #ff1268);
          color: white;
          line-height: 55px;
          justify-content: center;
          align-items: center;
        }

      }
      .preheating {
        display: flex;
        width: 100%;
        height: 55px;
        box-sizing: border-box;
        justify-content: space-between;
        padding: 0 20px;
        .left {
          display: flex;
          align-items: center;
          font-size: 16px;
          color: #333333;
          div {
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 16px;
            color: #333333;
            .iconfont {
              margin-right: 10px;
              font-size: 20px;
            }
          }
        }
        .preheatingText {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #ff9800;

        }
        .gray {
          color: #cccccc;
        }
        .red {
          color: #ff1268;
        }
      }
    }
    .indicationDialog {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .36);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 50;
      .indication {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
      }
      .dialogBox {
        width: 74%;
        background: #fff;
        border-radius: 11px;
        margin: 0 auto;
        padding-top: .2rem;
        position: relative;
        padding-bottom: 49px;
        h3 {
          font-size: 15px;
          color: rgb(51, 51, 51);
          text-align: center;
          font-weight: 400;
        }
        p {
          font-size: 14px;
          color: #999999;
          margin: 0 1.4rem 1.4rem;
        }
        a {
          display: inline-block;
          width: 100%;
          padding: 1rem 0;
          text-align: center;
          color: #6bb5ff;
          background: #d9ecff;
          font-size: 15px;
          position: absolute;
          bottom: 0;
          border-radius: 0 0 11px 11px;
        }
      }
    }
    .sharePoup {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .7);
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 50;
      display: flex;
      justify-content: center;
      .sharePoupWrap {
        position: absolute;
        bottom: 10px;
        background: white;
        width: 96%;
        border-radius: 16px;
        display: flex;
        flex-direction: column;

        .top {
          display: flex;
          height: 128px;

          .item {
            /*border: 1px solid red;*/
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 33.33%;
            .imgDiv {
              /*border: 1px solid red;*/
              width: 40px;
              height: 40px;
              margin-top: 30px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            span {
              font-size: 16px;
              color: #333333;
              margin: 10px 0;
            }

          }
        }
        .bottom {
          display: flex;
          font-size: 22px;
          color: #ff1268;
          height: 70px;
          justify-content: center;
          align-items: center;
          border-top: 1px solid #dddddd;
        }

      }
    }
    .certificationTip {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .7);
      position: fixed;
      top: 0;
      left: 0;
      z-index: 50;
      .certification {
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
      }
      .dialogBox {
        width: 74%;
        background: #fff;
        border-radius: 11px;
        margin: 0 auto;
        position: relative;
        h3 {
          font-size: 20px;
          color: rgb(51, 51, 51);
          text-align: center;
          font-weight: 400;
        }
        p {
          font-size: 14px;
          color: #999999;
          margin: 0 1.4rem 1.4rem;
          text-align: center;
          line-height: 20px;
        }
        .btnGroup {
          height: 50px;
          display: flex;
          flex-direction: row;
          .btn {
            width: 50%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;

          }
          .cancel {
            color: #999999;
            border-bottom-left-radius: 11px;
            border-top:1px solid #eeeeee;
          }
          .red {
            color: white;
            background: #ff1268;
            border-bottom-right-radius: 11px;
          }
        }

      }
    }

  }
</style>
